<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            width: 100vw;
        }

        .dou {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: aquamarine;
            position: absolute;
        }
    </style>
</head>

<body>
    <script>
        class Dou {
            x = 0;
            y = 0;
            visible = true;
            dou = document.createElement('div');
            constructor() {
                this.dou.setAttribute('class', 'dou');
                document.body.appendChild(this.dou);
            }
            randomPosition() {
                this.x = Math.random() * window.innerWidth;
                this.y = Math.random() * window.innerHeight;
            }
            hide() {
                this.visible = false;
                this.render();
            }
            show() {
                this.visible = true;
                this.render();
            }
            render() {
                this.dou.setAttribute('style', `
                    top: ${this.y}px;
                    left: ${this.x}px;
                    display: ${this.visible ? 'block' : 'none'};
                `);
            }
        }
        const d1 = new Dou();

        d1.randomPosition();
        d1.render();

        let flag = true;
        setInterval(() => {
            if (flag) {
                d1.hide();
            } else {
                d1.show();
            }
            flag = !flag;
        }, 1000)
    </script>
</body>

</html>